<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" @submit.native.prevent>
      <el-form-item label="楼层">
        <el-select v-model="listQuery.q_floorId" size="small" placeholder="请选择">
          <el-option v-for="item in floor" :label="item.name" :key="item.id" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="显示文字">
        <el-input v-model="listQuery.q_title" style="width: 200px;" size="small" class="filter-item" maxlength="20" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="listQuery.q_status" size="small" placeholder="请选择">
          <el-option v-for="item in floorPatchStatus" :label="item.name" :key="item.value" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="small" type="primary" @click="check">查询</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="button-table-margin">
      <el-button size="small" type="primary" @click='addFloorClass' v-permission="['admin/pcindex/floorpatch/create']">
        添加</el-button>
      <el-button size="small" type="primary" @click='editFloorClass' v-permission="['admin/pcindex/floorpatch/update']">
        修改</el-button>
      <el-button size="small" type="primary" @click='del' v-permission="['admin/pcindex/floorpatch/delete']">删除
      </el-button>
      <el-button size="small" type="primary" @click='pre' v-permission="['admin/pcindex/floorpatch/pre']">预使用
      </el-button>
      <el-button size="small" type="primary" @click='up' v-permission="['admin/pcindex/floorpatch/up']">启用</el-button>
      <el-button size="small" type="primary" @click='down' v-permission="['admin/pcindex/floorpatch/down']">停用
      </el-button>
      <el-button size="small" type="primary" @click="preview">预览</el-button>
    </div>
    <el-table ref="singleTable" :data="dataList" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%" max-height="450" @current-change="handleCurrentChange">
      <el-table-column type="index" align="center" width="50">
      </el-table-column>
      <el-table-column property="title" width="150" label="显示文字" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="所属楼层" property="floorName">
      </el-table-column>
      <el-table-column label="链接地址" width="200" property="linkUrl" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="使用状态">
        <template slot-scope="scope">
          {{ codeBox.USE_PRE[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column property="orderNo" label="排序号">
      </el-table-column>
      <el-table-column property="updateUserName" label="修改人">
      </el-table-column>
      <el-table-column property="updateTime" width="200" label="修改时间">
      </el-table-column>
      <el-table-column property="createUserName" label="创建人">
      </el-table-column>
      <el-table-column property="updateTime" width="200" label="创建时间">
      </el-table-column>
      <el-table-column property="remark" width="200" label="备注" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />
    <el-dialog :title="judgmentTitle" :visible.sync="dialogFormVisible" width="70%">
      <div class="app-container">
        <el-row>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
            class="demo-ruleForm el-form-bottom">
            <el-col :span="24">
              <el-form-item label="楼层" prop="floorId">
                <el-select v-model="ruleForm.floorId" placeholder="请选择" style="width: 323.06px">
                  <el-option v-for="item in floor" :label="item.name" :key="item.id" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="显示文字" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="链接地址" prop="linkUrl">
                <el-input v-model="ruleForm.linkUrl"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="排序" prop="orderNo">
                <el-input-number v-model="ruleForm.orderNo" :min="0" :max="99" label=""></el-input-number>
                <span class="form-word-hint">序号越小越靠前 最大99</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="ruleForm.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    toPcFloorPatchList,
    fetchPcFloorPatchList,
    prePatch,
    deleteFloorPatch,
    upFloorPatch,
    downFloorPatch,
    toAddPcFloorPatchList,
    createFloorPatch,
    editFloorPatch,
    updateFloorPatch
  } from '@/api/pcIndex'
  import {
    getCodeManager,
    codeToArray
  } from '@/api/all'
  import Pagination from '@/components/Pagination'
  import {
    Message
  } from 'element-ui'
  export default {
    name: 'pcindexfloorlist',
    components: {
      Pagination
    },
    data() {
      return {
        dataList: [],
        floor: [],
        floorPatchStatus: [],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 20,
          q_floorId: '',
          q_title: '',
          q_status: ''
        },
        currentRow: null,
        judgmentTitle: 'PC首页楼层碎屑添加',
        judgmentType: '1',
        dialogFormVisible: false,
        floor: [],
        ruleForm: {
          floorId: "",
          title: '',
          linkUrl: '',
          orderNo: '',
          remark: ''
        },
        rules: {
          floorId: [{
            required: true,
            message: "请选择楼层",
            trigger: "change"
          }, ],
          title: [{
              required: true,
              message: "请输入显示文字",
              trigger: "blur"
            },
            {
              max: 20,
              message: '不能超过20个字符',
              trigger: 'blur'
            }
          ],
          linkUrl: [{
              required: true,
              message: "请输入链接地址",
              trigger: "blur"
            },
            {
              max: 50,
              message: '不能超过50个字符',
              trigger: 'blur'
            }
          ],
          orderNo: [{
            required: true,
            message: "请输入排序号",
            trigger: "blur"
          }],
          remark: [{
            max: 50,
            message: '不能超过50个字符',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      getCodeManager('USE_PRE', () => {
        this.floorPatchStatus = codeToArray('USE_PRE');
      })
      toPcFloorPatchList().then(res => {
        this.floor = res.data.data.floors
      })
      this.getList()
    },
    methods: {
      handleCurrentChange(val) {
        // 选中当前行数据
        this.currentRow = val
      },
      // 获取列表数据
      getList() {
        this.listLoading = true
        fetchPcFloorPatchList(this.listQuery).then(response => {
          this.dataList = response.data.rows
          this.total = response.data.total
          this.listLoading = false
          console.log(this.dataList)
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      check() {
        this.getList()
      },
      reset() {
        this.listQuery = {
          page: 1,
          limit: 20,
          q_floorId: '',
          q_name: '',
          q_status: ''
        }
        this.getList()
      },
      addFloorClass() {
        this.judgmentTitle = 'PC首页楼层碎屑添加'
        this.judgmentType = '1'
        this.dialogFormVisible = true;
        this.resetForm('ruleForm')
      },
      editFloorClass() {
        if (!this.currentRow) {
          Message.error('请选择操作行。')
          return;
        };
        if (this.currentRow.status == 1) {
          Message.error('先停止使用，在进行修改。')
          return;
        }
        editFloorPatch({
          pcIndexFloorPatchId: this.currentRow.id
        }).then(res => {
          this.floor = res.data.data.floors
          this.ruleForm = res.data.data.pcIndexFloorPatch
        })
        this.judgmentTitle = 'PC首页楼层碎屑编辑'
        this.judgmentType = '2'
        this.dialogFormVisible = true;
      },
      pre() {
        if (!this.currentRow) {
          Message.error('请选择操作行。')
          return;
        };
        if (this.currentRow.status == 2) {
          Message.error('已经是预使用状态，请勿重复操作。')
          return;
        }

        this.$confirm('确定预使用吗？', '提示', {
          onfirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          prePatch({
            id: this.currentRow.id
          }).then(response => {
            if (!response.data.success) {
              Message.error(res.data.message);
              return;
            }
            Message.success('操作成功')
            this.getList()
          })
        })
      },
      del() {
        if (!this.currentRow) {
          Message.error('请选择操作行。')
          return;
        };
        if (this.currentRow.status == 1) {
          Message.error('使用中不能删除。')
          return;
        }
        this.$confirm('确定删除吗？', '提示', {
          onfirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteFloorPatch({
            id: this.currentRow.id
          }).then(res => {
            if (res.data.success) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList()
            } else {
              this.$message({
                type: 'error',
                message: res.data.message
              });
            }
          })
        })
      },
      up() {
        if (!this.currentRow) {
          Message.error('请选择操作行。')
          return;
        };
        if (this.currentRow.status == 1) {
          Message.error('已经是启用状态，请勿重复操作。')
          return;
        }
        if (this.currentRow.status == 3) {
          Message.error('不能从停用状态直接修改成使用状态。')
          return;
        }
        this.$confirm('确定启用吗？', '提示', {
          onfirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          upFloorPatch({
            id: this.currentRow.id
          }).then(response => {
            if (!response.data.success) {
              Message.error(res.data.message);
              return;
            }
            Message.success('操作成功')
            this.getList()
          })
        })
      },
      down() {
        if (!this.currentRow) {
          Message.error('请选择操作行。')
          return;
        };
        if (this.currentRow.status == 3) {
          Message.error('已经是停用状态，请勿重复操作')
          return;
        }
        this.$confirm('确定停用吗？', '提示', {
          onfirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          downFloorPatch({
            id: this.currentRow.id
          }).then(response => {
            if (!response.data.success) {
              Message.error(res.data.message);
              return;
            }
            Message.success('操作成功')
            this.getList()
          })
        })
      },
      upTool(id, status) {
        if (status == 1) {
          Message.error('已经是启用状态，请勿重复操作。')
          return;
        }
        if (status == 3) {
          Message.error('不能从停用状态直接修改成使用状态。')
          return;
        }
        upFloorPatch({
          id: id
        }).then(response => {
          if (!response.data.success) {
            Message.error(res.data.message);
            return;
          }
          Message.success('操作成功')
          this.getList()
        })
      },
      downTool(id, status) {
        if (status == 3) {
          Message.error('已经是停用状态，请勿重复操作')
          return;
        }
        downFloorPatch({
          id: id
        }).then(response => {
          if (!response.data.success) {
            Message.error(res.data.message);
            return;
          }
          Message.success('操作成功')
          this.getList()
        })
      },
      preview() {
        window.open("http://bbc.yixiekeji.com/previewindex.html");
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.judgmentType == '1') {
              createFloorPatch(this.ruleForm).then(res => {
                console.log(res)
                if (!res.data.success) {
                  Message.error(res.data.message);
                  return;
                }
                Message.success('操作成功')
                this.resetForm('ruleForm')
                this.dialogFormVisible = false;
                this.getList()
              })
            } else {
              let params = {
                id: this.ruleForm.id,
                floorId: this.ruleForm.floorId,
                title: this.ruleForm.title,
                linkUrl: this.ruleForm.linkUrl,
                orderNo: this.ruleForm.orderNo,
                remark: this.ruleForm.remark
              }
              updateFloorPatch(params).then(res => {
                console.log(res)
                if (!res.data.success) {
                  Message.error(res.data.message);
                  return;
                }
                Message.success('操作成功')
                this.resetForm('ruleForm')
                this.dialogFormVisible = false;
                this.getList()
              })
            }
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>
<style scoped>
  .filter-container .el-col-6 {
    margin-bottom: 15px;
  }

  .filter-item {
    margin-bottom: 0
  }

  /deep/ .filter-container label {
    font-size: 14px;
    font-weight: 500;
    margin-right: 10px;
  }
</style>
